<template>
  <div class="leftTreeTable">
    <div class="title">
      <div class="text">任务类型</div>
      <div class="icon">
        <i class="el-icon-circle-plus-outline title-icon" @click="addIconFun" />
        <i class="el-icon-delete title-icon" @click="delIconFun" />
      </div>
    </div>
    <div class="letftTable-Con">
      <el-scrollbar ref="scrollbar" class="z-h-100 treeScroll">
        <!-- <div style="height:1000px">xxxxx</div> -->
        <el-tree
          ref="tree"
          :data="tableData"
          node-key="nodeId"
          :props="defaultProps"
          highlight-current
          :expand-on-click-node="false"
          :default-expanded-keys="expand"
          draggable
          @node-click="rowClickFun"
          @node-contextmenu="contextmenu"
          @node-expand="updateScroll"
          @node-collapse="updateScroll"
        />
      </el-scrollbar>
    </div>
    <contextmenu v-if="menuVisible" ref="contextmenu" :memu-data="memuData" @foo="foo" />
  </div>
</template>

<script>
import { getTaskTypeTree } from '@/api/portalTaskUi/taskType'
import contextmenu from '@/components/contextmenu/index'
import treeEvent from './treeEvent'
import { mapGetters } from 'vuex'
export default {
  name: 'LeftTreeTable',
  components: {
    contextmenu
  },
  mixins: [treeEvent],
  data() {
    return {
      tableData: [],
      selectlist: [],
      menuVisible: false, // 菜单显示
      memuDataMap: { // 菜单数据
        parentNodes: [
          { text: '增加同级节点', fn: this.addSameLevelNode, id: 1 },
          { text: '增加子级节点', fn: this.addChildNode, id: 2 }
        ],
        childNodes: [
          { text: '增加子级节点', fn: this.addChildNode, id: 3 }
        ]
      },
      memuData: [], // 右键菜单的数据
      expand: [], // 展开的节点
      height: window.innerHeight - 50, // 树table的高度
      defaultMenuData: [
        { text: '删除', fn: this.delFun, id: 5, disabled: true }
      ],
      defaultProps: { // 默认的props
        children: 'children',
        label: 'nodeName'
      },
      row: {}, // 当前节点
      currentId: ''
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  created() {
    console.log(this.user)
    const params = {
      tenantId: this.user.id
    }
    this.currentId = this.user.id
    this.setTreeDataFun(params)
  },

  methods: {
    async setTreeDataFun(params) {
      this.expand = []
      const data = await this.getTaskTypeTreeFun(params)
      this.currentId = params.tenantId
      console.log(data)
      if (Array.isArray(data) && data.length > 0) {
        this.tableData = data
        this.rowClickFun(this.tableData[0]) // 选择第一项的数据
        if (this.tableData[0].children && this.tableData[0].children.length > 0) {
          this.expand.push(this.tableData[0].nodeId) // 展开第一项
        }
        this.$nextTick(() => { // 默认选中第一项目
          this.$refs.tree.setCurrentKey(this.tableData[0].nodeId)
        })
      } else {
        this.tableData = []
        this.$emit('change', [])
      }
    },
    // 点击头部添加按钮
    addIconFun() {
      console.log(this.tableData)
      if (this.tableData.length === 0) {
        this.addSameLevelNode()
      } else {
        this.addChildNode()
      }
    },
    // 点击头部删除
    delIconFun() {
      if (this.tableData.length === 0) {
        return
      }
      if (this.row.children && this.row.children.length > 0) {
        this.$message({
          message: '该节点下还存在子节点,不可直接删除',
          type: 'warning'
        })
      } else {
        this.delFun()
      }
    },
    // 菜单事件
    contextmenu(event, data) {
      const isSame = this.$refs.tree.getCurrentKey() === data.nodeId // 判断是否相同的元素右键点击
      this.row = data
      this.menuVisible = false
      this.menuVisible = true
      const type = data.pid === '0' ? 'parentNodes' : 'childNodes'
      this.memuData = this.memuDataMap[type].concat(this.defaultMenuData)
      const isDisabled = data.children && data.children.length > 0
      this.$set(this.memuData[this.memuData.length - 1], 'disabled', isDisabled)
      // // // 阻止右键默认行为
      event.preventDefault()
      this.$nextTick(() => {
        this.$refs.contextmenu.init(data, data, event)
        if (!isSame) {
          this.$refs.tree.setCurrentKey(data.nodeId)
          this.rowClickFun(data)
        }
      })
    },
    foo() { // 取消鼠标监听事件 菜单栏
      this.menuVisible = false
      document.removeEventListener('click', this.foo)
    },
    // 获取树的数据
    getTaskTypeTreeFun(params) {
      return new Promise(resolve => {
        getTaskTypeTree(params).then(res => {
          resolve(res.data.data)
        })
      })
    },
    rowClickFun(data) {
      this.row = data
      this.$emit('change', [data])
      this.$refs.scrollbar.update()
    },
    updateScroll() {
      this.$refs.scrollbar.update()
    }
  }
}
</script>

<style lang="less" scoped>
.leftTreeTable {
  width: 300px;
  height: 100%;
  margin-right: 5px;
  /deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
    // background-color:red;
    .bgColor();

    .el-tree-node__label{
      color:#fff;
    }
  }
  .title {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #dddddd;
    margin-bottom: 10px;
    .text {
      font-size: 14px;
      color: #666;
    }
    .icon {
      .title-icon {
        cursor: pointer;
      }
    }
  }
  .letftTable-Con {
    width: 100%;
    height: calc(100% - 40px - 10px);
  }
  .treeScroll {
    /deep/ .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
}
</style>

